<template>
  <div class="nr" ref='bill'>
    <div style='width:100%;height:1px;'></div>
   
    <div class="item" >
      <div class="ds">
        <div class="left_left ds">
          <div class="headimg">
            <img class="img1" :src="details.avatar" alt />

            <img class="huang" src="../assets/fenxiang/huang.png" alt />
          </div>

          <div class>
            <div class="ds">
              <span class="nickname">{{details.nickname}}</span>
              <img
                v-if="details.sex==1"
                style="margin-left:0.18rem;"
                src="../assets/fenxiang/nan.png"
                alt
              />

              <img
                v-if="details.sex==2"
                style="margin-left:0.18rem;"
                src="../assets/fenxiang/nu.png"
                alt
              />
            </div>
            <div class="jianjie">{{details.into}}</div>
          </div>
        </div>
        <div class="right_right" @click="open">+ 关注</div>
      </div>
      <div class="ttile">{{details.title}}</div>

      <div v-if="type==1" style="font-size:14px;" class="ck-content1" v-html="details.content">
        <!-- class="box" <img src alt /> -->
      </div>


      <div v-if="type==2" style="font-size:14px;" >
        <!-- class="box" <img src alt /> -->
        <video style="width:100%;" :src="details.video" controls="controls"></video>
      </div>

      <div v-if="type==4" style="font-size:14px;" >
        <!-- class="box" <img src alt /> -->
        <div class="jianjie" v-for="(item,index) in details.option_list" :key="index">选项{{index}}:  {{item.content}}</div>
      </div>

      <div v-if="type==3" style="font-size:14px;" >
        <!-- class="box" <img src alt /> -->
        {{details.content}}
      </div>


      
      <div v-if="type==5" style="font-size:14px;" >
        <!-- class="box" <img src alt /> -->
        <video style="width:100%;" :src="details.video" controls="controls"></video>
      </div>

      <div class="lei" v-if="type==1||type==2">
        #
        <span style="color:rgba(178,178,178,1);">{{details.plate_name}}</span>
      </div>

      <div class="bottom">
        <div class="aaa">
          <img src="../assets/fenxiang/time.png" alt />
          <div class="zi">{{details.timeText}}</div>
        </div>

        <div class="aaaa">
          <div class="aaa">
            <img src="../assets/fenxiang/zan.png" alt />
            <div class="zi" style="margin-right:0.22rem;">{{details.like_count}}</div>
          </div>
          <div class="aaa" v-if="type!=2">
            <img src="../assets/fenxiang/ping.png" alt />
            <div class="zi">{{details.comment_count}}</div>
          </div>
        </div>
      </div>
    </div>
    <div  style="width:100%;height:1.06rem;"></div>


    <div class="top" id="openApp" @click="open">
      <div class="left">
        <img style="margin-right:4px;" src="../assets/fenxiang/logo.png" alt />
        <div class="t1">韩乐讯</div>
      </div>
      <div class="right">下载APP</div>

      <!-- <div id="mod_pop" v-if="isweixin==true" class="right">请在其他浏览器中打开</div> -->
    </div>

    <!-- <img style="width:100%;" :src="canvasImageUrl" alt=""> -->

  </div>
</template>

<script>

import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      // key: value
      // isweixin: true,
      type: "",
      id: "",
      details: "",
      canvasImageUrl:""
    };
  },
  mounted() {
    this.type = this.$route.query.type;
    this.id = this.$route.query.id;

    // var isweixin = this.isWeixin();
    // this.isweixin = isweixin;

    this.getall();

    
  },

  methods: {

    htmlToCanvas() {

      html2canvas(this.$refs.bill, {})

      .then((canvas) => {

        let imageUrl = canvas.toDataURL('image/png'); // 将canvas转成base64图片格式

        this.canvasImageUrl = imageUrl;

    //     this.isDom = false;

      });

    },


    // isWeixin() {
    //   var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
    //   if (ua.match(/MicroMessenger/i) == "micromessenger") {
    //     return true; //微信打开
    //   } else {
    //     return false; //不是微信打开
    //   }
    // },
    open(e) {
      // console.log("1111");
      // if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      //   //ios判断
      //   window.location.href = "https://www.hlx.open"; //通过app打开协议来打开app
      //   window.setTimeout(function() {
      //     window.location.href = "https://itunes.apple.com/cn/app/id477927812"; //没有弹框打开app则打开app下载地址
      //   }, 20);
      // } else if (/(Android)/i.test(navigator.userAgent)) {
      //   //Android判断
      //   var state = null;
      //   try {
      //     state = window.open("https://www.hlx.open");
      //   } catch (e) {}
      //   if (state) {
      //     window.close();
      //   } else {
      //     window.location.href =
      //       "https://downpack.baidu.com/baidutieba_AndroidPhone_v9.0.8.0(9.0.8.0)_1019960r.apk";
      //   }
      // }

      window.location.href ="https://downpack.baidu.com/baidutieba_AndroidPhone_v9.0.8.0(9.0.8.0)_1019960r.apk";
    },
    async getall() {
      // 1文章2视频3问答4投票5小视频
      if (this.type == 1) {
        await this.$get(
          // method: "get",
          "media/shows/show",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }
      if (this.type == 2) {
        await this.$get(
          // method: "get",
          "media/shows/video_show",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }
      if (this.type == 3) {
        await this.$get(
          // method: "get",
          "media/shows/show",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }
      if (this.type == 4) {
        await this.$get(
          // method: "get",
          "media/shows/vote_show",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }
      if (this.type == 5) {
          await this.$get(
          // method: "get",
          "media/shows/short_videoshow",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }

      // this.$nextTick(() => {

      //     // 跳用html转化canvas函数
      //     var that=this
      //     setTimeout(function(){
      //       that.htmlToCanvas();
      //     },5000)

      // })
      // this.htmlToCanvas()
    }
  }
};
</script>

<style scoped>
>>> .ck-content1 p img{
  width:100%;
}
>>> .textAlignCenter{
  text-indent: 0!important;
}
.aaaa {
  display: flex;
  align-items: center;
}
.bottom {
  margin-top: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aaa {
  display: flex;
  align-items: center;
}
.zi {
  margin-left: 0.22rem;
  font-size: 0.28rem;

  line-height: 0.4rem;
  color: rgba(178, 178, 178, 1);
}
.lei {
  font-size: 0.24rem;
  margin-top: 0.26rem;
  line-height: 0.34rem;
  color: #75e9d5;
}
.box {
  width: 6.3rem;
  height: 3.32rem;
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-radius: 0.2rem;
  margin-top: 0.16rem;
}
.ttile {
  font-size: 0.28rem;
  margin-top: 0.22rem;
  line-height: 0.4rem;
  color: rgba(48, 49, 51, 1);
  opacity: 1;
}
.nickname {
  font-size: 0.32rem;

  line-height: 0.44rem;
  color: rgba(48, 49, 51, 1);
}
.jianjie {
  font-size: 0.24rem;
  line-height: 0.34rem;
  color: rgba(178, 178, 178, 1);
}
.headimg {
  width: 0.72rem;
  height: 0.72rem;
  background: rgba(0, 0, 0, 0);
  border-radius: 50%;
  margin-right: 0.16rem;
  position: relative;
}

.headimg .img1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.72rem;
  height: 0.72rem;
  background: rgba(0, 0, 0, 0);
  border-radius: 50%;
  margin-right: 0.16rem;
}
.ds {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item {
  width: 6.86rem;
  /* height: 100vh;
  overflow-y: scroll;
  overflow: hidden; */
  /* height: 7.36rem; */
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 0.2rem;
  margin: 0.24rem auto;
  padding: 20px 14px;
  box-sizing: border-box;
}
.nr {
  width: 100%;
  height: 100vh;
  background: rgba(247, 247, 247, 1);
  position: relative;
}
.top {
  width: 7.5rem;
  height: 1.06rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.28rem;
  box-sizing: border-box;
  position: fixed;
  bottom:0;
  left:0;
  
}
.left {
  display: flex;
  align-items: center;
}
.t1 {
  font-size: 0.32rem;

  font-weight: 400;
  line-height: 0.54rem;
}
.right {
  font-size: 0.28rem;
  line-height: 0.4rem;
  color: #FC5A8E;
}
.right_right {
  width: 1.12rem;
  height: 0.56rem;
  border: 1px solid rgba(252, 90, 142, 1);
  opacity: 1;
  font-size: 0.2rem;
  color: rgba(252, 90, 142, 1);
  line-height: 0.56rem;
  text-align: center;
  border-radius: 0.28rem;
}

.huang {
  position: absolute;
  bottom: 0;
  right: 0;
}

.ck-content1 {
  height: auto;
  margin-top: 0;
  padding: 0 !important ;
  /* position: relative; */
  border: none !important;
}
</style>

<style>

/*
 * CKEditor 5 (v19.1.1) content styles.
 * Generated on Tue, 09 Jun 2020 10:37:49 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
 */

:root {
  --ck-highlight-marker-blue: hsl(201, 97%, 72%);
  --ck-highlight-marker-green: hsl(120, 93%, 68%);
  --ck-highlight-marker-pink: hsl(345, 96%, 73%);
  --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
  --ck-highlight-pen-green: hsl(112, 100%, 27%);
  --ck-highlight-pen-red: hsl(0, 85%, 49%);
  --ck-image-style-spacing: 1.5em;
  --ck-todo-list-checkmark-size: 16px;
}

/* ckeditor5-image/theme/imageresize.css */
.ck-content1 .image.image_resized {
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content1 .image.image_resized img {
  width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content1 .image.image_resized > figcaption {
  display: block;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content1 .image > figcaption {
  display: table-caption;
  caption-side: bottom;
  word-break: break-word;
  color: hsl(0, 0%, 20%);
  background-color: hsl(0, 0%, 97%);
  padding: 0.6em;
  font-size: 0.75em;
  outline-offset: -1px;
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content1 code {
  background-color: hsla(0, 0%, 78%, 0.3);
  padding: 0.15em;
  border-radius: 2px;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-side,
.ck-content1 .image-style-align-left,
.ck-content1 .image-style-align-center,
.ck-content1 .image-style-align-right {
  max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-side {
  float: right;
  margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-align-left {
  float: left;
  margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-align-right {
  float: right;
  margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content1 blockquote {
  overflow: hidden;
  padding-right: 1.5em;
  padding-left: 1.5em;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  border-left: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content1[dir="rtl"] blockquote {
  border-left: 0;
  border-right: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content1 pre {
  padding: 1em;
  color: hsl(0, 0%, 20.8%);
  background: hsla(0, 0%, 78%, 0.3);
  border: 1px solid hsl(0, 0%, 77%);
  border-radius: 2px;
  text-align: left;
  direction: ltr;
  tab-size: 4;
  white-space: pre-wrap;
  font-style: normal;
  min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content1 pre code {
  background: unset;
  padding: 0;
  border-radius: 0;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content1 hr {
  border-width: 1px 0 0;
  border-style: solid;
  border-color: hsl(0, 0%, 37%);
  margin: 0;
}
/* ckeditor5-image/theme/image.css */
.ck-content1 .image {
  display: table;
  clear: both;
  text-align: center;
  margin: 1em auto;
}
/* ckeditor5-image/theme/image.css */
.ck-content1 .image > img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  min-width: 50px;
}
/* ckeditor5-table/theme/table.css */
.ck-content1 .table {
  margin: 1em auto;
  display: table;
}
/* ckeditor5-table/theme/table.css */
.ck-content1 .table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  border: 1px double hsl(0, 0%, 70%);
}
/* ckeditor5-table/theme/table.css */
.ck-content1 .table table td,
.ck-content1 .table table th {
  min-width: 2em;
  padding: 0.4em;
  border: 1px solid hsl(0, 0%, 75%);
}
/* ckeditor5-table/theme/table.css */
.ck-content1 .table table th {
  font-weight: bold;
  background: hsla(0, 0%, 0%, 5%);
}
/* ckeditor5-table/theme/table.css */
.ck-content1[dir="rtl"] .table th {
  text-align: right;
}
/* ckeditor5-table/theme/table.css */
.ck-content1[dir="ltr"] .table th {
  text-align: left;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content1 .media {
  clear: both;
  margin: 1em 0;
  display: block;
  min-width: 15em;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list {
  list-style: none;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list li {
  margin-bottom: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list li .todo-list {
  margin-top: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input {
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  width: var(--ck-todo-list-checkmark-size);
  height: var(--ck-todo-list-checkmark-size);
  vertical-align: middle;
  border: 0;
  left: -25px;
  margin-right: -15px;
  right: 0;
  margin-left: 0;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input::before {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid hsl(0, 0%, 20%);
  border-radius: 2px;
  transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background,
    250ms ease-in-out border;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input::after {
  display: block;
  position: absolute;
  box-sizing: content-box;
  pointer-events: none;
  content: "";
  left: calc(var(--ck-todo-list-checkmark-size) / 3);
  top: calc(var(--ck-todo-list-checkmark-size) / 5.3);
  width: calc(var(--ck-todo-list-checkmark-size) / 5.3);
  height: calc(var(--ck-todo-list-checkmark-size) / 2.6);
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--ck-todo-list-checkmark-size) / 8)
    calc(var(--ck-todo-list-checkmark-size) / 8) 0;
  transform: rotate(45deg);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input[checked]::before {
  background: hsl(126, 64%, 41%);
  border-color: hsl(126, 64%, 41%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input[checked]::after {
  border-color: hsl(0, 0%, 100%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label .todo-list__label__description {
  vertical-align: middle;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .marker-yellow {
  background-color: var(--ck-highlight-marker-yellow);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .marker-green {
  background-color: var(--ck-highlight-marker-green);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .marker-pink {
  background-color: var(--ck-highlight-marker-pink);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .marker-blue {
  background-color: var(--ck-highlight-marker-blue);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .pen-red {
  color: var(--ck-highlight-pen-red);
  background-color: transparent;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .pen-green {
  color: var(--ck-highlight-pen-green);
  background-color: transparent;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content1 .page-break {
  position: relative;
  clear: both;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content1 .page-break::after {
  content: "";
  position: absolute;
  border-bottom: 2px dashed hsl(0, 0%, 77%);
  width: 100%;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content1 .page-break__label {
  position: relative;
  z-index: 1;
  padding: 0.3em 0.6em;
  display: block;
  text-transform: uppercase;
  border: 1px solid hsl(0, 0%, 77%);
  border-radius: 2px;
  font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  font-size: 0.75em;
  font-weight: bold;
  color: hsl(0, 0%, 20%);
  background: hsl(0, 0%, 100%);
  box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content1 .text-tiny {
  font-size: 0.7em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content1 .text-small {
  font-size: 0.85em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content1 .text-big {
  font-size: 1.4em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content1 .text-huge {
  font-size: 1.8em;
}
@media print {
  /* ckeditor5-page-break/theme/pagebreak.css */
  .ck-content1 .page-break {
    padding: 0;
  }
  /* ckeditor5-page-break/theme/pagebreak.css */
  .ck-content1 .page-break::after {
    display: none;
  }
}
</style>